<template>
	<view class="shiming">
	
		<block v-if="status == 0">
			<view class="agree">
				<view class="top flex-center">
					  <icon type="success" size="30" color="#4CD964"/>
					  认证已通过
				</view>
				<view class="card">
					<view class="list flex">
						<view class="label">真实姓名</view>
						<text>{{obj.name}}</text>
					</view>
					<view class="list flex">
						<view class="label">身份证号</view>
						<text>{{obj.id_card}}</text>
					</view>
				</view>
				<view class="tip flex">
					<icon type="warn" size="14" color="orange"></icon>
					为了保护您的隐私，证件照片已隐藏
				</view>
				<view class="btns flex-between">
					<navigator open-type="navigateBack" :delta="1" class="btn flex-center">返回</navigator>
					<navigator url="/pages/self/chezhuCer" open-type="redirect" hover-class="none" class="btn flex-center">车主认证</navigator>
				</view>
			</view>
		</block>
		<block v-else-if="status == 1">
			<view class="agree">
				<view class="top flex-center" style="height: 20vh;color:orange">
					  <icon type="waiting" size="30" color="orange"/>
					  平台正在审核中...
				</view>
			</view>
		</block>
		<block v-else-if="status == 2">
			<view class="agree">
				<view class="top flex-center-column" style="height: 40vh;color:red;font-size: 30rpx;">
					  <icon type="clear" size="50" color="red" style="margin-bottom: 30rpx;"/>
					   审核不通过,可以联系平台客服进行办理！
				</view>
			</view>
		</block>
		
		<block v-if="status == -1">
			<form @submit="submitForm">
			<!-- 	<view class="list flex">
					<view class="label">真实姓名</view>
					<input type="text" placeholder="请填写身份证上的姓名">
				</view>
				<view class="list flex">
					<view class="label">身份证号</view>
					<input type="idcard" placeholder="请填写身份证号">
				</view> -->
				<view class="list">
					<view class="label">身份证人像面</view>
					<view class="upload flex-center" @click="upload('id_card_front_url')">
						<image :src="id_card_front_url" mode="aspectFill" v-if="id_card_front_url"></image>
						<image src="/static/idcard-front.png" mode="aspectFill" v-else></image>
					</view>
				</view>
				<view class="list">
					<view class="label">身份证国徽面</view>
					<view class="upload flex-center" @click="upload('id_card_back_url')">
						<image :src="id_card_back_url" mode="aspectFill" v-if="id_card_back_url"></image>
						<image src="/static/idcard-back.png" mode="aspectFill" v-else></image>
					</view>
				</view>
				<button form-type="submit">提交认证</button>
			</form>
			<view class="tip flex">
				<text>点击提交认证 即表示已阅读并同意小王出行</text><navigator url="" hover-class="none">《隐私条款》</navigator>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj:{},
				status:-2,
				id_card_front_url:'',//身份证正面
				id_card_back_url:'',//身份证反面
				isSubmit:true
			};
		},
		onLoad(){
			this.getAuth()
		},
		methods:{
			getAuth(){
				this.$https.get('user').then(res=>{
					this.obj = res.auth;
					this.status = res.auth ? res.auth.status : -1;
				})
			},
			upload(type){
				this.$https.upload().then(res=>{
					console.log(res)
					this[type] = res;
				})
			},
			submitForm(){
				if(!this.isSubmit) return;
				if(!this.id_card_front_url){
					uni.showToast({
						title:'请上传身份证人像面',
						icon:'none'
					})
					return
				}
				if(!this.id_card_front_url){
					uni.showToast({
						title:'请上传身份证国徽面',
						icon:'none'
					})
					return
				}
				this.isSubmit = false;
				this.$https.post('user/applyAuth',{
					id_card_front_url:this.id_card_front_url,
					id_card_back_url:this.id_card_back_url
				}).then(res=>{
					console.log(res)
					this.isSubmit = true;
					this.getAuth()
				})
			}
		},
		onBackPress() {
			uni.reLaunch({
				url:"/pages/self/index"
			})
			return true
		}
	}
</script>

<style lang="less">
	@color: #4CD964;
	page{
		background: #f2f3f4;
	}
	.shiming{
		padding:0 30rpx 30rpx;
		form{
			.list{
				width: 100%;
				border-bottom: 1px solid #eee;
				.label{
					width: 210rpx;
					height: 90rpx;
					font-size: 32rpx;
					color:#333;
					line-height: 90rpx;
					font-weight: bold;
				}
				input{
					width: 450rpx;
					height: 90rpx;
					font-size: 32rpx;
				}
				.upload{
					width: 100%;
					height: 440rpx;
					border:1px solid #ddd;
					border-radius: 10rpx;
					background: #f2f3f3;
					image{
						width:100%;
						height: 100%;
					}
				}
			}
			button{
				margin: 80rpx 0 30rpx;
				background:@color ;
				color:#fff;
				font-size: 32rpx;
			}
		}
		
		.tip{
			font-size: 24rpx;
			color:#888;
			navigator{
				color:@color;
			}
		}
		.agree{
			.top{
				font-size: 45rpx;
				color:@color;
				line-height: 3;
				icon{
					margin-right: 20rpx;
				}
			}
			.card{
				background: white;
				.list{
					line-height: 3;
					font-size: 30rpx;
					padding: 0 30rpx;
					border-bottom: 1px solid #eee;
					.label{
						width: 180rpx;
						font-weight: bold;
					}
				}
			}
			.tip{
				icon{
					margin:20rpx 10rpx 20rpx 20rpx;
				}
			}
			.btns{
				padding: 30rpx;
				.btn{
					width: 48%;
					height: 80rpx;
					border-radius: 10rpx;
					
					&:first-child{
						border:1px solid #ccc;
						background: #ddd;
					}
					&:last-child{
						background: orange;
						color:#fff;
					}
				}
			}
		}
	}
</style>
